<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    /* 
        align-items :交叉轴的对齐，flex—start flex-end center baseline stretch 
        flex-direction: column ：横着走
    */
    *{
        margin: 0;
        padding: 0;
        box-sizing:border-box
    }
    body{
        background-color: rgb(240, 240, 240);
    }
    .container{
        width: 90%;
        margin: 0 auto;
    }
    /* 白色卡片盒子 */
    .card{
        background-color: white;
        display: flex;
        flex-direction: column;
        margin-top: 10px;
        border-radius: 10px;
        /* 内边距 */
        padding:1rem 1rem 1rem 1rem
    }
    /* 小图标8个盒子 */
    .card_content{
        display: flex;
        flex: 1 1 6rem;
    }
    /* 小图标个体盒子 */
    .card_content_item{  
        display: flex;
        flex-direction: column;
        flex: 1 1 5.88rem;
        align-items:center;
        justify-content: center;  
    }
    .card_content_item_image{
        width: 2rem;
        height: 2rem;
    }
    .title{
        margin-left: 0.8rem;
        font-weight: 600;
        margin-bottom:1rem ;
        font-size: 1rem;
    }
    .card_content_item_text{
        font-size: 0.5rem;
        font-family:PingFangSC-Regular;
        color: #bbbabf;
        margin: 0.6rem;
    }
</style>
<body>
    <div class="container">
        <div class="card">
            <div class="title">转运中心</div>
            <div class="card_content">
                <div class="card_content_item">
                    <img class="card_content_item_image" src="https://bpic.51yuansu.com/pic2/cover/00/31/29/5810adfbdbd4c_610.jpg" alt="">
                    <div class="card_content_item_text">1212</div>
                </div>
                <div class="card_content_item">
                    <img class="card_content_item_image" src="https://bpic.51yuansu.com/pic2/cover/00/31/29/5810adfbdbd4c_610.jpg" alt="">
                    <div class="card_content_item_text">1212</div>
                </div>
                <div class="card_content_item">
                    <img class="card_content_item_image" src=" https://bpic.51yuansu.com/pic2/cover/00/31/29/5810adfbdbd4c_610.jpg" alt="">
                    <div class="card_content_item_text">1212</div>
                </div>
                <div class="card_content_item">
                    <img class="card_content_item_image" src=" https://bpic.51yuansu.com/pic2/cover/00/31/29/5810adfbdbd4c_610.jpg" alt="">
                    <div class="card_content_item_text">1212</div>
                </div>
                
    
            </div>
            <div class="card_content">
                <div class="card_content_item">
                    <img class="card_content_item_image" src="https://bpic.51yuansu.com/pic2/cover/00/31/29/5810adfbdbd4c_610.jpg" alt="">
                    <div class="card_content_item_text">1212</div>
                </div>
                <div class="card_content_item">
                    <img class="card_content_item_image" src=" https://bpic.51yuansu.com/pic2/cover/00/31/29/5810adfbdbd4c_610.jpg" alt="">
                    <div class="card_content_item_text">1212</div>
                </div>
                <div class="card_content_item">
                    <img class="card_content_item_image" src=" https://bpic.51yuansu.com/pic2/cover/00/31/29/5810adfbdbd4c_610.jpg" alt="">
                    <div class="card_content_item_text">1212</div>
                </div>
                <div class="card_content_item">
                    <img class="card_content_item_image" src=" https://bpic.51yuansu.com/pic2/cover/00/31/29/5810adfbdbd4c_610.jpg" alt="">
                    <div class="card_content_item_text">1212</div>
                </div>
    
            </div>
        </div>
    </div>
    
</body>
</html>